import React, { Component } from 'react';
import { Collapse, Upload, Modal } from 'antd';
import { connect } from 'dva';
import RepairInfo from './RepairInfo';
import router from 'umi/router';
import classNames from 'classnames';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';

const Panel = Collapse.Panel;

@connect(({ repair, loading, common }) => ({
  repair,
  loading: loading.effects['repair/repairInfoList'],
  dictObject: common.dictObject,
}))
export default class RepairDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1', '2'],
      fileList: [],
      id: 0,
      repairInfoModalVisible: false,
    };
    this.paneSize = [1, 2];
  }

  componentDidMount() {
    const {
      repair: { detail },
      id,
      dispatch,
    } = this.props;
    if (id) {
      this.setState({ id });
      dispatch({
        type: 'repair/repairInfoList',
        payload: { id },
      });
    }
    //币种：
    dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }

  componentWillReceiveProps(nextProps) {
    const {
      repair: { detail },
      id,
      dictObject,
    } = nextProps;

    if (detail[id] && detail[id].attachments) {
      const fileList = detail[id].attachments.map(file => {
        const { id, fileUrl } = file;
        return {
          uid: id,
          name: fileUrl.substring(fileUrl.lastIndexOf('\\') + 1, fileUrl.length),
          status: 'done',
          url: `/server/api/tms/tms-attachment/readFile?path=${fileUrl}&token=${localStorage.getItem(
            'token'
          )}`,
          id,
        };
      });
      this.setState({ fileList });
    }
    if (dictObject['currency-type'] && detail[id] && detail[id].currencyType) {
      dictObject['currency-type'].map(v => {
        if (v.code === detail[id].currencyType) {
          detail[id].currencyType = v.value;
        }
      });
    }
  }

  // 操作收缩框
  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  // 取消明细
  repairInfoHandleCancel = () => {
    this.setState({ repairInfoModalVisible: false });
  };

  // 明细分页
  handleStandardTableChange = param => {
    const { formValues } = this.state;
    const params = {
      ...formValues,
      ...param,
    };
    this.props.dispatch({
      type: 'repair/repairList',
      payload: params,
    });
  };

  render() {
    const {
      list,
      type,
      repair: { detail, repairInfoList },
      loading,
      isMobile,
    } = this.props;

    const { id, activeKey, repairInfoModalVisible, fileList } = this.state;
    const data = repairInfoList[id] ? repairInfoList[id] : {};

    const repairInfoParams = {
      id,
      data,
      type: 'detail',
      loading,
      visible: repairInfoModalVisible,
      change: this.handleStandardTableChange,
      handleCancel: this.repairInfoHandleCancel,
    };
    const panel = detail[id];
    const payAble =
      panel && panel.totalFee && Number(panel.totalFee) !== 0
        ? Number(panel.totalFee).toFixed(2)
        : '';
    const payActual =
      panel && panel.totalFee2 && Number(panel.totalFee2) !== 0
        ? Number(panel.totalFee2).toFixed(2)
        : '';

    const fields = [
      { key: 'repairNo', name: '单据号' },
      { key: 'cartPlateNo', name: '车牌号' },
      { key: 'ownCompanyName', name: '所属公司' },
      //新增start
      { key: 'upkeepTime', name: '送保时间' },
      { key: 'upkeepType', name: '保养类型' },
      { key: 'upkeepFactory', name: '保养厂' },
      { key: 'upkeepPerson', name: '送保人' },
      { key: 'currentMileage', name: '当前里程' },
      { key: payAble, name: '应付金额', isConst: true },
      { key: payActual, name: '实付金额', isConst: true },
      //新增end
      { key: 'repairTime', name: '送修时间' },
      { key: 'repairFactory', name: '维修厂' },
      { key: 'repairPerson', name: '送修人' },
      { key: 'currencyType', name: '币种' },
      // { key: 'totalFee', name: '当前费用' },
      { key: 'remarks', name: '备注', isRow: true },
      { key: 'attachments', name: '附件', isRow: true, isFile: true },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
          {this.paneSize.map((item, panelId) => {
            return (
              <Panel
                header={`${panelId === 0 ? '基础信息' : '明细'}`}
                key={`${panelId + 1}`}
                className={styles.customPanelStyle}
                extra={false}
              >
                {panelId === 0 && (
                  <DetailsList
                    isMobile={isMobile}
                    detilsData={{
                      fields: fields,
                      value: panel,
                      fileList,
                    }}
                  />
                )}
                {panelId === 1 && <RepairInfo {...repairInfoParams} />}
              </Panel>
            );
          })}
        </Collapse>
      </div>
    );
  }
}
